---
title: Color Picker
description:
  Used to select colors from a color area or a set of defined swatches
links:
  source: components/color-picker
  storybook: components-color-picker--basic
  recipe: color-picker
  ark: https://ark-ui.com/react/docs/components/color-picker
---

<ExampleTabs name="color-picker-basic" />

## Usage

```jsx
import { ColorPicker } from "@chakra-ui/react"
```

```jsx
<ColorPicker.Root>
  <ColorPicker.HiddenInput />
  <ColorPicker.Label />
  <ColorPicker.Control>
    <ColorPicker.Input />
    <ColorPicker.Trigger />
  </ColorPicker.Control>
  <ColorPicker.Positioner>
    <ColorPicker.Content>
      <ColorPicker.Area />
      <ColorPicker.EyeDropper />
      <ColorPicker.Sliders />
      <ColorPicker.SwatchGroup>
        <ColorPicker.SwatchTrigger>
          <ColorPicker.Swatch />
        </ColorPicker.SwatchTrigger>
      </ColorPicker.SwatchGroup>
    </ColorPicker.Content>
  </ColorPicker.Positioner>
</ColorPicker.Root>
```

## Shortcuts

### ColorPicker.ChannelSlider

This component renders the slider track, thumb and transparency grid.

```tsx
<ColorPicker.ChannelSlider />
```

is the same as:

```tsx
<ColorPicker.ChannelSlider>
  <ColorPickerTransparencyGrid />
  <ColorPickerChannelSliderTrack />
  <ColorPickerChannelSliderThumb />
</ColorPicker.ChannelSlider>
```

### ColorPicker.Sliders

This is a shortcut component for the hue and alpha sliders:

```tsx
<Stack>
  <ColorPickerChannelSlider channel="hue" />
  <ColorPickerChannelSlider channel="alpha" />
</Stack>
```

### ColorPicker.Area

This component renders the color area thumb and background.

```tsx
<ColorPicker.Area>
  <ColorPicker.AreaThumb />
  <ColorPicker.AreaBackground />
</ColorPicker.Area>
```

is the same as:

```tsx
<ColorPicker.Area />
```

### ColorPicker.EyeDropper

This is a shortcut component for:

```tsx
<ColorPicker.EyeDropperTrigger asChild>
  <IconButton>
    <LuPipette />
  </IconButton>
</ColorPicker.EyeDropperTrigger>
```

## Examples

### Sizes

Use the `size` prop to change the size of the color picker.

<ExampleTabs name="color-picker-with-sizes" />

### Variants

Use the `variant` prop to change the visual style of the color picker. Values
can be either `outline` or `subtle`.

<ExampleTabs name="color-picker-with-variants" />

### Input Only

Combine the `ColorPicker.ValueSwatch` and the `ColorPicker.EyeDropper` on the
`InputGroup` to render a color picker that contains only an input.

<ExampleTabs name="color-picker-input-only" />

### Swatch Only

Use the `ColorPicker.SwatchGroup` and `ColorPicker.SwatchTrigger` to render only
the color swatches.

<ExampleTabs name="color-picker-swatch-only" />

### Trigger Only

Compose the color picker to initially show only a trigger using the
`ColorPicker.ValueSwatch` and `ColorPicker.ValueText`.

<ExampleTabs name="color-picker-trigger-only" />

### Trigger Inside Input

Compose the color picker to trigger in input using the `InputGroup` and
`ColorPickerInput`.

<ExampleTabs name="color-picker-trigger-only" />

### Controlled

Use the `value` and `onValueChange` props to control the state of the color
picker.

<ExampleTabs name="color-picker-controlled" />

### Store

An alternative way to control the color picker is to use the `RootProvider`
component and the `useColorPicker` store hook.

This way you can access the color picker state and methods from outside the
color picker.

<ExampleTabs name="color-picker-with-store" />

### Change End

Use the `onValueChangeEnd` to listen to when the user finishes selecting a
color, rather than while they are scrubbing or dragging through the color area.

<ExampleTabs name="color-picker-change-end" />

### Channel Slider

Combine the `ColorPickerChannelSliders` and the `format` prop to add the
different color channels to the color picker.

<ExampleTabs name="color-picker-channel-slider-only" />

### Hook Form

Here's an example of how to integrate the color picker with `react-hook-form`.

<ExampleTabs name="color-picker-with-hook-form" />

### Inline

Here's an example of how to display an inline version of the color picker.

<ExampleTabs name="color-picker-inline" />

### Disabled

Pass the `disabled` prop to disable the color picker.

<ExampleTabs name="color-picker-with-disabled" />

### Channel Input

Use the `ChannelFormat.Select` and `ColorPicker.ChannelInput` to create a color
picker that allows users to select their preferred channel.

<ExampleTabs name="color-picker-with-channel-input" />

### Fit Content

Pass the `data-fit-content` attribute to the `ColorPicker.Trigger` to make it
fit the content.

<ExampleTabs name="color-picker-with-fit-content" />

### ReadOnly

Use the `readOnly` prop to make the color picker component read-only.

### Save Swatch

Here's an example of how to save a selected color as a swatch.

<ExampleTabs name="color-picker-with-save-swatch" />

### Swatches

Here's an example of how to combine the color picker with pre-defined swatches.

<ExampleTabs name="color-picker-with-swatches" />

### Swatch and Input

Here's how to compose a swatch with an input.

<ExampleTabs name="color-picker-with-swatch-and-input" />

### Swatch and Trigger

Here's how to compose a swatch with a trigger.

<ExampleTabs name="color-picker-with-swatch-and-input" />

## Props

### Root

<PropTable component="ColorPicker" part="Root" />
